'use strict';
var React = require('react');
var ReactRedux = require('react-redux');
var NewsOverview = require('../components/NewsOverview.jsx');
var ReDialog = require('../components/pc/ReDialog.jsx');
var Pager = require('../components/pc/pager.jsx');
var action = require('../actions/news.js');
var ReSlider = require('./pc/ReSlider.jsx');
var PhotoChange = require('./pc/PhotoChange.jsx');
var ReProcessBar = require('../components/pc/ReProcessBar.jsx');
var ReButton = require('../components/pc/ReButton.jsx');
var ReDropDownList = require('../components/pc/ReDropDownList.jsx');
var HkfsProductItem=require('../components/pc/HkfsProductItem.jsx');
var HkfsHomeproductTable=require('./pc/HkfsHomeProductTable.jsx');
var HkfsProductDescription=require('../components/pc/HkfsProductDescription.jsx');
var ReFileUpload=require('../components/pc/ReFileUpload.jsx');
var ReTab=require('./pc/ReTab.jsx');
var HkfsMap=require('../components/pc/HkfsMap.jsx')
var HkfsHomeToolBar=require('../components/pc/HkfsHomeToolBar.jsx');
var RePanel=require('./pc/RePanel.jsx');
var ReLiGroup=require('./pc/ReLiGroup.jsx');

var fetchList = action.fetchList;

class NewsList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {keyword: ''};
        this.handleChange = this.handleChange.bind(this);
        this.renderProductItems=this.renderProductItems.bind(this);
    }

    search() {
        let keyword = this.state.keyword;
        this.props.dispatch(fetchList(keyword))
    }

    renderList() {
        console.log(this.props);
        return this.props.list.map((item, i) => {
            item.onGotoDetail = () => {
                var id = item.id;
                location.href = '/detail?id=' + id;
            };
            var renderItem = <NewsOverview {...item} key={item.id}/>;
            return renderItem;
            //return React.createElement(NewsOverview, item)
        })
    }

    handleChange(event) {
        this.setState({
            keyword: event.target.value
        });
    }


    test() {
        ReDialog.showDialog({
            title: '敏之提示',
            ok: '朕知道了',
            content: '测试测试测试',
            isMask: true,
            isCancel: true,
            result: (result)=> {
                alert(result);
            }
        });
    }

    test2() {
        ReDialog.showDialog({
            title: '敏之提示',
            ok: '朕知道了',
            content: '测试测试测试',
            isMask: true,
            isCancel: true,
            isPrompt: true,
            result: (result)=> {
                alert(result);
            }
        });
    }

    renderProductItems(){
        return this.props.data.map((item,i)=>{
            return <HkfsProductItem key={"HkfsProductItem"+i} {...item}></HkfsProductItem>
        });
    }



    render() {
        /*  let {page, totalPage, dispatch} = this.props;*/
        let page = this.props.page;
        let totalPage = this.props.totalPage;
        let dispatch = this.props.dispatch;
        let dorpDownList = ['sdf', 'sdfsdfsdfsdfsd', 'ffffffff'];
        let productItem=this.props.data[0];
        let widthArray=['20%','20%','20%','20%','20%'];
        let itemTitle=['test1','test1','test1','test1','test1'];
        return (
            <div>
                <div>
                    <input value={this.state.keyword} onChange={this.handleChange}/>
                    <button onClick={this.search.bind(this)}>搜索</button>
                </div>
                <div>
                    {this.renderList()}
                </div>
                <Pager page={page} totalPage={totalPage} onChangePage={i=>dispatch(fetchList(null,i))}/>
                <ReDialog/>
                <ReButton reButtonClick={this.test}>测试1</ReButton>
                <ReButton reButtonClick={this.test2}>测试2</ReButton>
                <ReDropDownList title="测试" list={dorpDownList} reClass="small"/>
                <ReDropDownList title="测试2" list={dorpDownList} reClass="small"/>


                <div className="TestPhotoChange">
                    <PhotoChange href="www.baidu.com" backImg="/images/pc/content_icon_safe_hover.png" fontImg="/images/pc/content_icon_safe_normal.png">
                        <HkfsProductDescription>
                            <div>资金安全</div>
                            <div>严格的资金管理流程完善安全技术</div>
                        </HkfsProductDescription>
                    </PhotoChange>
                </div>





                <div className="TestSlider">
                    <ReSlider showCount={3} isAutomatic={true} isShowPrevAndNext={true}>
                        {this.renderProductItems()}
                    </ReSlider>
                </div>


                <HkfsProductItem {...productItem}></HkfsProductItem>

                <div className="TestProcessBar">
                    <ReProcessBar process="80"></ReProcessBar>
                </div>

                <ReFileUpload onChange={this.test} multiple={false}></ReFileUpload>

                <HkfsHomeproductTable reSrc="/images/pc/content_title_bg_cyan.png" description="风险低，收益稳定" type="固定收益" homeProductDetailData={this.props.homeProductDetailData} widthArray= {widthArray} itemTitle={itemTitle}></HkfsHomeproductTable>



                <ReTab>
                    <div reTabTitle="sdfdsfdsfds1">
                        <div>dsfdsfdsf1</div>
                        <div>dsfdsfdsf1</div>
                        <div>dsfdsfdsf1</div>
                        <div>dsfdsfdsf1</div>
                        <div>dsfdsfdsf1</div>
                    </div>
                    <div reTabTitle="sdfdsfdsfds2">
                        <div>dsfdsfdsf12</div>
                        <div>dsfdsfdsf12</div>
                        <div>dsfdsfdsf12</div>
                        <div>dsfdsfdsf12</div>
                        <div>dsfdsfdsf12</div></div>
                    <div reTabTitle="sdfdsfdsfds3">
                        <div>dsfdsfdsf13</div>
                        <div>dsfdsfdsf13</div>
                        <div>dsfdsfdsf13</div>
                        <div>dsfdsfdsf13</div>
                        <div>dsfdsfdsf13</div>
                    </div>
                </ReTab>

                <HkfsHomeToolBar>
                    <div barClick={this.test2}>
                        <img src="/images/pc/toolbar_calculator.png"/>
                        <div>收益计算器</div>
                    </div>
                    <div barClick={this.test2}>
                        <img src="/images/pc/toolbar_app.png"/>
                        <div>app下载</div>
                    </div>
                    <div barClick={this.test2}>
                        <img src="/images/pc/toolbar_phone.png"/>
                        <div>联系我们</div>
                    </div>
                    <div barClick={this.test2}>
                        <img src="/images/pc/toolbar_two_code.png"/>
                        <div>扫码关注我们</div>
                    </div>
                    <div barClick={this.test2}>
                        <img src="/images/pc/toolbar_top.png"/>
                        <div>回到顶部</div>
                    </div>
                </HkfsHomeToolBar>


                <RePanel title="财富动态" titleImage="/images/pc/content_icon_partner.png" moreLink="www.baidu.com">
                    <ReLiGroup reData={this.props.homeDynamicDetail}></ReLiGroup>
                </RePanel>
                <RePanel width="300px" height="500px" title="华康财富" titleImage="/images/pc/content_icon_partner.png">
                    <HkfsMap width="100%" height="300px"></HkfsMap>
                    <div></div>
                </RePanel>


            </div>
        )
    }
}

function mapStateToProps(state) {
    // 一般一组状态都是为一个页面服务的，所以把它们一股脑的映射过来比较方便
    // 但是把映射一一写出来也有好处，就是很容易看到组件里有什么属性
    /*  var test=Object.assign({}, state.news);
     console.log('sdf');
     console.log(state);
     console.log(test);*/
    return Object.assign({}, state.news,state.hkfs);
}
module.exports = ReactRedux.connect(mapStateToProps)(NewsList);
